<template>
  <a-row class="grid-demo" align="center" :wrap="false">
    <!--导航栏-->
    <a-col flex="auto">
      <div class="menu-demo">
        <a-menu
          mode="horizontal"
          :selected-keys="activeMenu"
          @menu-item-click="menuClick"
        >
          <a-menu-item
            key="0"
            :style="{ padding: 0, marginRight: '38px' }"
            disabled
          >
            <div class="titletar">
              <img class="logo" src="../../public/111.jpeg" />
              <div class="title_name">答题</div>
            </div>
          </a-menu-item>
          <a-menu-item v-for="item in routerList" :key="item.path"
            >{{ item.name }}
          </a-menu-item>
        </a-menu>
      </div>
    </a-col>
    <!--登录状态-->
    <a-col flex="100px">
      <div v-if="loginUser.user.userName == '' || loginUser.user == null">
        <a-button
          @click="
            () => {
              router.push('/user/login');
            }
          "
          >登录
        </a-button>
      </div>
      <div v-else>
        <a-dropdown>
          <a-button>{{ loginUser.user.userName }}</a-button>
          <template #content>
            <a-doption @click="myinfo">
              <template #icon>
                <icon-user />
              </template>
              <template #default>个人中心</template>
            </a-doption>
            <a-doption @click="logout">
              <template #icon>
                <icon-export />
              </template>
              <template #default>退出登录</template>
            </a-doption>
          </template>
        </a-dropdown>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { routes } from "@/router/routers";
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import { useLoginUserStore } from "@/store/userStore";
import checkAccess from "@/access/checkAccess";
import { Message } from "@arco-design/web-vue";
import * as logInController from "@/servers/api/logInController";

const loginUser = useLoginUserStore();
//菜单列表
const routerList = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.hide) {
      return false;
    }
    //根据权限过滤菜单
    if (!checkAccess(loginUser.user, item.meta?.access)) {
      return false;
    }
    return true;
  });
});
const router = useRouter();
// 菜单选择状态
const activeMenu = ref(["/"]);
// 路由调整时更新状态项
router.afterEach((to) => {
  activeMenu.value = [to.path];
});

// 点击菜单调整页面
const menuClick = (key: string) => {
  router.push({
    path: key,
  });
};

const logout = async () => {
  const res = await logInController.logout();
  if (res.data.code === 0) {
    loginUser.setUser({
      userName: "",
    });
    Message.info({ content: "退出成功" });
  }
};
const myinfo = () => {
  Message.warning({ content: "个人信息" });
};
</script>

<style scoped>
.grid-demo {
}

.titletar {
  display: flex;
  align-items: center;
}

.title_name {
  margin-left: 20px;
  font-size: 15px;
}

.logo {
  height: 56px;
}
</style>
